<template>
<transition name="fade">
  <div class="my-confirm my-confirm__modal" v-if="visible" @click.self="onStateChange('rejected')">
    <div class="my-confirm__box">
      <div class="my-confirm__body">
        <div>{{ title }}</div>
      </div>
      <div class="my-confirm__footer">
        <div class="my-confirm__cancel-btn" @click="onStateChange('rejected')">
          {{ cancelText }}
        </div>
        <div class="my-confirm__confirm-btn" @click="onStateChange('fulfilled')">
          {{ confirmText }}
        </div>
      </div>
    </div>
  </div>
</transition>
</template>

<script>
export default {
  name: "MyConfirm",
  data() {
    return {
      state: "pending",
      visible: false,
      title: "",
      confirmText: "",
      cancelText: "",
      onFulfilled: null,
      onRejected: null,
    };
  },
  methods: {
    onStateChange(state) {
      this.state = state;
      if (this.state === "fulfilled") {
        this.onFulfilled && this.onFulfilled();
      } else if (this.state === "rejected") {
        this.onRejected && this.onRejected();
      }
      this.visible = false;
      this.state = "pending";
    },
    executor(resolve, reject) {
      this.onFulfilled = resolve;
      this.onRejected = reject;
    },
    setText({
      title = "您确认要这么做吗？",
      confirmText = "确定",
      cancelText = "取消",
    } = {}) {
      this.title = title;
      this.confirmText = confirmText;
      this.cancelText = cancelText;
    },
  },
  created() {
      this.setText()
  }
};
</script>

<style lang="scss" scoped>
.my-confirm {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;

  &__box {
    width: 84vw;
    height: 40.8vw;
    background-color: #fff;
    border-radius: 1.6vw;
    display: flex;
    flex-direction: column;
  }

  &__body {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &__footer {
    display: flex;
    height: 17.0667vw;
    border-top: 1px solid #e7e7e7;
    text-align: center;
    line-height: 17.0667vw;
  }

  &__cancel-btn {
    flex: 1;
    border-right: 1px solid #e7e7e7;
  }

  &__confirm-btn {
    flex: 1;
    color: #dd1a21;
  }
}
</style>
